<template>
  <div class="container">
    <van-search
      center
      v-model="keywords"
      shape="round"
      @search="onSearch"
      placeholder="搜索关键词"
      :clearable="false"
      :left-icon="require('@/assets/images/search.png')"
    />
    <div class="content" v-if="finish">
      <HomeSlider :sliders="sliders"></HomeSlider>
      <van-grid icon-size="52px" :border="false">
        <van-grid-item v-for="(item,index) in navs" :key="index" :icon="item.src" :text="item.name" @click="goToDetail(item)" />
      </van-grid>
      <div class="blank"  :style="{height: blank.height-2 + 'px',backgroundColor: blank.bgcolor}"></div>
      <section class="gzh">
        <div class="info">
          <img v-lazy="gzh.logo" alt="" class="avatar">
          <div class="text">
            <h4>{{gzh.name}}</h4>
            <span>{{gzh.desc}}</span>
          </div>
        </div>
        <div class="concern" @click="showPopup">关注</div>
        <van-popup v-model="show" round>
          <div class="modal">
            <img src="@/assets/images/topright.png" alt="" class="topright">
            <p>关注公众号</p>
            <img v-lazy="gzh.qrcode" alt="" class="qrcode">
            <span>长按二维码识别或截图保存</span>
          </div>
        </van-popup>
      </section>
      <div class="vod-box">
        <div class="vod-title">
          <h4>{{course.title}}</h4>
          <span @click="checkAll">查看全部</span>
        </div>
        <VodCourse :courses="course.items"></VodCourse>
      </div>
    </div>
    <TechSupport></TechSupport>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from '@/components/common/Tabbar';
import HomeSlider from '@/views/home/childComps/HomeSlider';
import VodCourse from '@/components/content/VodCourse';
import TechSupport from '@/components/common/TechSupport';
import { getHomeAllData } from '@/network/home';
import { Notify } from 'vant';

export default {
  components: {
    Tabbar,
    HomeSlider,
    VodCourse,
    TechSupport,
    Tabbar,
  },
  data() {
    return {
      keywords: '',
      show: false,
      finish: false,
      sliders: [],
      navs: [],
      blank: {},
      gzh: {},
      course: {},
    };
  },
  methods: {
    onSearch() {
      if (!this.keywords) return Notify('请输入关键字后再搜索');
      this.$router.push({
        path: '/search',
        query: {
          keywords: this.keywords,
        },
      });
    },
    checkAll() {
      this.$router.push({ path: '/vod' });
    },
    goToDetail(item) {
      this.$router.push({
        path: 'vod/detail',
        query: {
          id: item.href.split('=')[1],
        },
      });
    },
    showPopup() {
      this.show = true;
    },
  },
  created() {
    getHomeAllData().then((res) => {
      this.sliders = res.data[0].config_render;
      this.navs = res.data[1].config_render.items;
      this.blank = res.data[2].config_render;
      this.gzh = res.data[3].config_render;
      this.course = res.data[4].config_render;
      this.finish = true;
    });
  },
};
</script>

<style lang="less" scoped>
.container {
  min-height: 100vh;
  background: #f6f6f6;
  .gzh {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px;
    background-color: #fff;
    .info {
      display: flex;
      .avatar {
        width: 52px;
        border-radius: 50%;
      }
      .text {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding-left: 12px;
        h4 {
          font-size: 15.2px;
          font-weight: 400;
        }
        span {
          font-size: 12px;
          color: #999;
        }
      }
    }
    .concern {
      width: 58px;
      height: 24px;
      border-radius: 12px;
      text-align: center;
      color: #fff;
      background-color: #3ca7fa;
    }
    .modal {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      width: 204px;
      height: 224px;
      .topright {
        position: absolute;
        top: 2px;
        right: 0;
        width: 64px;
        height: 68px;
      }
      .qrcode {
        width: 120px;
      }
      span {
        font-size: 12px;
        color: #999;
      }
    }
  }

  .vod-box {
    margin-top: 8px;
    background-color: #fff;
    .vod-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 40px;
      padding: 14px 16px 0;
      h4 {
        font-size: 18px;
      }
      span {
        font-size: 12px;
        color: #999;
      }
    }
  }
}
</style>
